<template>
  <el-form :inline="true" class="search-form">
    <slot name="before"></slot>

    <el-form-item label="搜索内容">
      <el-input v-model.trim="searchCond.storeName" placeholder="输入姓名、手机号后4位"></el-input>
    </el-form-item>

    <el-form-item label="商户">
      <el-select v-model="searchCond.merchantId" filterable clearable>
        <el-option label="全部" value=""></el-option>
        <el-option v-for="item in processedByOption" :key="item.value" :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="订单状态">
      <el-select v-model="searchCond.state" filterable clearable>
        <el-option label="全部" value=""></el-option>
        <el-option v-for="item in processedByOption" :key="item.value" :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>

    <div class='time-box'>
      <el-form-item label="付款时间">
        <el-date-picker v-model="searchCond.timeBegin" placeholder="开始时间" type="datetime" value-format='YYYY-MM-DD HH:mm'
          format='YYYY-MM-DD HH:mm' />
      </el-form-item>
      <el-form-item label="-" class='end-time'>
        <el-date-picker v-model="searchCond.timeEnd" placeholder="截止时间" type="datetime" value-format='YYYY-MM-DD HH:mm'
          format='YYYY-MM-DD HH:mm' />
      </el-form-item>
    </div>

    <div class='search-btn-block'>
      <hz-button type="primary" @click="clickQuery">查询</hz-button>
      <hz-button type="primary" @click="resetSearchCond">重置</hz-button>
      <slot name="afterButton"></slot>
    </div>
    <slot name="after"></slot>

  </el-form>
</template>
<script setup>
import { ref, computed, reactive } from "vue";
import { objectiveOptions, specialMarkOptions, orderStatusOptions } from "@/plugin/dict";
import { useStore } from "vuex";

/* 
column: createTime
order: desc
field: id,,,pickingSerialNo,supplyAddress,nameTakingMeal,phoneTakingMeals,storeName,nameDishes,remarks,commodityPrice,totalPrice,commission,createTime,orderCount,state,action
pageNo: 1
pageSize: 10 */
const store = useStore();
const props = defineProps({
  exclude: {
    type: Array,
    default: [],
  },
  type: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["searchClick", "type", "clickQuery"]);

const processedByOption = ref([]);

// 搜素条件
const searchCond = reactive({
  timeBegin: "",
  timeEnd: "",
  storeName: "",
  state: "",
  merchantId: "",
});


// 数值限制
function checkPhoneChange(value) {
  searchCond.phone = value.replace(/[^\d]+/g, "");
}

// 重置条件
function resetSearchCond() {
  Object.keys(searchCond).forEach((key) => {
    searchCond[key] = "";
  });

  emits("reset");
}

// 查询
function clickQuery() {
  emits('clickQuery', { ...searchCond })
  console.log('clickQuery')
}

function getSearchCond() {
  return { ...searchCond }
}

// 对外暴露数据
defineExpose({
  getSearchCond: getSearchCond,
  clickQuery: clickQuery,
  // resetSearchCond: resetSearchCond,
});
</script>

<style lang="scss" scoped>
.el-form>* {
  display: inline-flex;
  vertical-align: middle;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
    margin-right: 24px;
  }
}

.end-time {
  :deep(label) {
    width: 0px !important;
    margin-right: 5px;
  }
}
</style>
